<template>
  <el-dialog
    v-dialogDrag
    :fullscreen="isFullscreen"
    :visible.sync="dialogVisible"
    v-if="dialogVisible"
    :before-close="closeForm"
    width="7rem"
  >
    <div slot="title" class="header-title hd-title">
      <span>{{ dialogTitle }}</span>
      <i
        v-if="isFullscreen === false"
        class="el-icon-full-screen"
        @click="fScreen"
      ></i>
      <i v-else class="el-icon-news" @click="ifScreen"></i>
    </div>
    <el-tabs tabPosition="left" @tab-click="handleClick">
      <el-tab-pane label="选择SKU组">
        <el-form :model="formArr" :rules="rules" ref="formArr">
          <el-row>
            <el-col :span="24">
              <el-form-item prop="product_sku_item_id">
                <el-select
                  @change="changeSelectValue"
                  style="display: block"
                  v-model="formArr.product_sku_item_id"
                  placeholder="请选择SKU组"
                  filterable
                >
                  <el-option
                    v-for="item in product_sku_items"
                    :key="item.val"
                    :label="item.key"
                    :value="item.val"
                  >
                    {{ item.key + "-" + item.content }}
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table
          :header-cell-style="{
            background: '#fafafa',
            color: '#000000D9',
            fontSize: '14px',
            padding: '6px 0',
            border: '1px solid #eee',
          }"
          :cell-style="{
            color: '#606266',
            fontSize: '12px',
            padding: '6px 0',
          }"
          :data="tableDataList"
          style="width: 100%"
          height="2rem"
        >
          <el-table-column
            align="center"
            prop="sku_No"
            label="本地Sku号"
            width=""
          ></el-table-column>
          <el-table-column
            align="center"
            prop="product_category.zh"
            label="品名"
            width=""
          ></el-table-column>
          <el-table-column
            align="center"
            prop="hs_code"
            label="HSCODE"
          ></el-table-column>
          <el-table-column align="center" prop="amount" label="数量">
            <template slot-scope="scope">
              <el-input
                @blur="blurSkuEnvent(scope.row, scope.column)"
                @focus="focusSkuEnvent(scope.row, scope.column)"
                v-model="scope.row.amount"
                v-if="scope.row.isShow"
              ></el-input>
              <p v-else>
                {{ scope.row.amount }}
                <el-button
                  @click="editSkuClick(scope.row, scope.column)"
                  type="text"
                  size="small"
                  ><i class="el-icon-edit"></i>&nbsp;修改
                </el-button>
              </p>
            </template>
          </el-table-column>
        </el-table>
        <div>
          <el-button size="small" type="primary" @click="handleSkuSubmit"
            ><i class="el-icon-circle-plus-outline"></i> 保存
          </el-button>
          <el-button size="small" @click="closeForm"
            ><i class="el-icon-circle-close"></i> 取消
          </el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="新建SKU">
        <el-form
          :model="formList"
          :rules="rules"
          ref="formList"
          label-width="0.5rem"
        >
          <el-row :gutter="0">
            <el-col :span="22">
              <el-form-item
                label="SKU"
                :rules="[
                  {
                    required: true,
                    message: '请输入SKU',
                    trigger: ['blur', 'change'],
                  },
                ]"
                prop="sku_No"
                name="sku_No"
              >
                <el-input
                  placeholder="请输入商品SKU"
                  v-model="formList.sku_No"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div
            class="product_style"
            v-for="(item, index) in formList.product"
            :key="'product_style' + index"
          >
            <el-row :gutter="0">
              <el-col :span="11">
                <el-form-item label="语言类型">
                  <el-select
                    style="display: block"
                    placeholder="请选择语言类型"
                    v-model="item.country_abb"
                  >
                    <el-option
                      v-for="item in CountryAbbr"
                      :key="item.val + 'a'"
                      :label="item.key"
                      :value="item.val"
                      >{{ item.key }}
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="品名">
                  <el-input
                    v-model="item.product_title"
                    placeholder="请输入相关语言商品名称"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="类型">
                  <el-input
                    placeholder="请输入相关语言商品类型"
                    v-model="item.product_category"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="描述">
                  <el-input
                    placeholder="请输入相关语言商品描述"
                    v-model="item.product_describe"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="2" style="text-align: center">
                <el-button
                  size="small"
                  type="primary"
                  plain
                  v-if="index === 0"
                  icon="el-icon-plus"
                  circle
                  @click="addFormItem()"
                ></el-button>
                <el-button
                  size="small"
                  v-if="index !== 0"
                  type="danger"
                  plain
                  icon="el-icon-minus"
                  circle
                  @click="removeFormItem(index)"
                ></el-button>
              </el-col>
            </el-row>
          </div>
          <el-row>
            <el-col :span="11">
              <el-form-item
                style="display: inline-block"
                name="charged"
                prop="charged"
              >
                <el-checkbox
                  v-if="formList.specifications"
                  v-model="formList.specifications.charged"
                  >是否带电?
                </el-checkbox>
              </el-form-item>
              <el-form-item
                style="display: inline-block"
                label=""
                prop="liquid"
              >
                <el-checkbox
                  v-if="formList.specifications"
                  v-model="formList.specifications.liquid"
                  >是否液体?
                </el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item
                label="颜色"
                prop="specifications.color"
                :rules="[
                  {
                    required: true,
                    message: '请输入相关商品颜色',
                    trigger: ['blur', 'change'],
                  },
                ]"
              >
                <el-input
                  placeholder="请输入商品颜色"
                  v-if="formList.specifications"
                  v-model="formList.specifications.color"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="HsCode" prop="hs_code" name="hs_code">
                <el-input
                  v-model="formList.hs_code"
                  placeholder="请输入HsCode"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item
                label="单价"
                :rules="[
                  {
                    required: true,
                    message: '请输入单价',
                    trigger: ['blur', 'change'],
                  },
                ]"
                prop="univalent"
              >
                <el-input
                  placeholder="请输入商品单价"
                  v-model="formList.univalent"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item
                label="单重"
                :rules="[
                  {
                    required: true,
                    message: '请输入重量',
                    trigger: ['blur', 'change'],
                  },
                ]"
                prop="weight"
              >
                <el-input
                  placeholder="请输入商品单重"
                  v-model="formList.weight"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item
                label="长度"
                :rules="[
                  {
                    required: true,
                    message: '请输入长',
                    trigger: ['blur', 'change'],
                  },
                ]"
              >
                <el-input
                  v-if="formList.volume"
                  v-model="formList.volume.L"
                  placeholder="请输入商品长度"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item
                label="宽度"
                :rules="[
                  {
                    required: true,
                    message: '请输入宽',
                    trigger: ['blur', 'change'],
                  },
                ]"
                name="univalent"
                prop="univalent"
              >
                <el-input
                  placeholder="请输入商品宽度"
                  v-if="formList.volume"
                  v-model="formList.volume.W"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item
                label="高度"
                :rules="[
                  {
                    required: true,
                    message: '请输入高',
                    trigger: ['blur', 'change'],
                  },
                ]"
                prop="weight"
              >
                <el-input
                  v-if="formList.volume"
                  v-model="formList.volume.H"
                  placeholder="请输入商品高度"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div>
          <el-button size="small" type="primary" @click="SubmitSku"
            ><i class="el-icon-circle-plus-outline"></i> 保存
          </el-button>
          <el-button size="small" @click="closeForm"
            ><i class="el-icon-circle-close"></i> 取消
          </el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="新建SKU组">
        <el-form :model="form" :rules="rules" ref="form">
          <el-row>
            <el-col :span="24">
              <el-form-item
                label="SKU组号："
                style="text-align: left; font-weight: bold"
              >
                <div style="height: 40px; line-height: 40px">
                  {{ sku_item_No }}
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                prop="product_item_title.zh"
                :rules="[
                  {
                    required: true,
                    message: '请输入SKU名称',
                    trigger: ['blur', 'change'],
                  },
                ]"
              >
                <el-input
                  v-model="form.product_item_title.zh"
                  placeholder="输入SKU组名称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item prop="product_sku_id">
                <el-select
                  filterable
                  @change="changeSelectVal"
                  style="display: block"
                  v-model="form.product_sku_id"
                  placeholder="请选择SKU"
                  filterable
                >
                  <el-option
                    v-for="item in product_skus"
                    :key="item.val + 'b'"
                    :label="item.key"
                    :value="item.val"
                    >{{ item.key + "-" + item.content }}
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table
          :header-cell-style="{
            background: '#fafafa',
            color: '#000000D9',
            fontSize: '14px',
            padding: '6px 0',
            border: '1px solid #eee',
          }"
          :cell-style="{
            color: '#606266',
            fontSize: '12px',
            padding: '6px 0',
          }"
          :data="tableData"
          style="width: 100%"
          height="2rem"
        >
          <el-table-column
            align="center"
            prop="sku_No"
            label="本地Sku号"
            width=""
          ></el-table-column>
          <el-table-column
            align="center"
            prop="product_title.zh"
            label="品名"
            width=""
          ></el-table-column>
          <el-table-column
            align="center"
            prop="hs_code"
            label="HSCODE"
          ></el-table-column>
          <el-table-column align="center" prop="amount" label="数量">
            <template slot-scope="scope">
              <el-input
                @blur="blurEnvent(scope.row, scope.column)"
                @focus="focusEnvent(scope.row, scope.column)"
                v-model="scope.row.amount"
                v-if="scope.row.isShow"
              ></el-input>
              <p v-else>
                {{ scope.row.amount }}
                <el-button
                  @click="editClick(scope.row, scope.column)"
                  type="text"
                  size="small"
                  ><i class="el-icon-edit"></i>&nbsp;修改
                </el-button>
              </p>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="" label="操作">
            <template slot-scope="scope">
              <el-button
                @click="delClick(scope.$index)"
                type="text"
                size="small"
                ><i class="el-icon-delete"></i>&nbsp;删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div>
          <el-button size="small" type="primary" @click="handleSubmit"
            ><i class="el-icon-circle-plus-outline"></i> 保存
          </el-button>
          <el-button size="small" @click="closeForm"
            ><i class="el-icon-circle-close"></i> 取消
          </el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
import {
  getSkuList,
  getSkuFieldList,
  getSkuItemNo,
  skuPreview,
  chooseSku,
  skuListDel,
  delSku,
} from "@/api/coupang";
import { getCountryAbbr } from "@/api/sku";

export default {
  props: {
    editData: {
      type: Object,
      default: () => ({}),
    },
    dialogTitle: {
      type: String,
      default: "",
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isFullscreen: false,
      form: {
        product_item_title: {
          zh: "",
        },
      },
      formList: {
        platform: "coupang",
        hs_code: "",
        product: [
          {
            country_abb: "",
            product_title: "",
            product_describe: "",
            product_category: "",
          },
        ],
        univalent: "",
        weight: "",
        volume: {
          L: "",
          W: "",
          H: "",
        },
        specifications: {
          charged: false,
          liquid: false,
          color: "",
        },
      },
      CountryAbbr: null,
      formArr: {},
      product_skus: [],
      product_sku_items: [],
      rules: {
        hs_code: [
          { required: true, message: "请输入HsCode编码", trigger: "blur" },
        ],
        country_abb: [
          {
            required: true,
            message: "请选择语言类型",
            trigger: ["blur", "change"],
          },
        ],
        product_title: [
          {
            required: true,
            message: "请输入商品名称",
            trigger: ["blur", "change"],
          },
        ],
        product_category: [
          {
            required: true,
            message: "请输入商品类型",
            trigger: ["blur", "change"],
          },
        ],
        product_describe: [
          {
            required: true,
            message: "请输入商品描述",
            trigger: ["blur", "change"],
          },
        ],
      },
      tableData: [],
      tableDataList: [],
      sku_item_No: "",
    };
  },
  watch: {
    editData: {
      handler(val) {
        this.formArr = { ...val };
        console.log(val);
        this.chooseSku({ product_sku_item_id: val.product_sku_item_id });
        this.getSkuItemNo(val);
      },
    },
    dialogVisible(val) {
      if (val) {
        this.getSkuList();
        this.getSkuFieldList();
        this.getCountryAbbr();
      }
    },
  },
  methods: {
    editClick(row, column) {
      if (column.label === "数量") {
        row.isShow = !row.isShow;
      }
    },
    focusEnvent(row, column) {
      if (column.label === "数量") {
        row.oldAmount = row.amount;
      }
    },
    blurEnvent(row, column) {
      if (column.label === "数量") {
        row.isShow = !row.isShow;
        if (row.amount !== row.oldAmount) {
        }
      }
    },
    //SKU组
    editSkuClick(row, column) {
      if (column.label === "数量") {
        row.isShow = !row.isShow;
      }
    },
    focusSkuEnvent(row, column) {
      if (column.label === "数量") {
        row.oldAmount = row.amount;
      }
    },
    blurSkuEnvent(row, column) {
      if (column.label === "数量") {
        row.isShow = !row.isShow;
        if (row.amount !== row.oldAmount) {
        }
      }
    },
    changeSelectVal(val) {
      this.skuPreview({
        sku_item_No: this.sku_item_No,
        product_sku_id: val,
      });
    },
    changeSelectValue(val) {
      this.chooseSku({ product_sku_item_id: val });
    },
    handleClick(tab, event) {},
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let obj = [];
          let flag = true;
          let reg = /^[1-9]\d*$/;
          this.tableData.forEach((item) => {
            if (item.amount > 0 && reg.test(item.amount)) {
              obj.push({ skuID: item.product_sku_id, amount: item.amount });
            } else {
              flag = false;
            }
          });
          if (flag) {
            this.$emit("submit", {
              product_item_title: this.form.product_item_title,
              sellerProductItemId: this.editData.sellerProductItemId,
              sku_item: obj,
              sku_item_No: this.sku_item_No,
              platform: "coupang",
            });
            this.closeForm();
          } else {
            return this.$message.error("数量不能少于一个且不能为非数字");
          }
        }
      });
    },
    async getCountryAbbr() {
      const res = await getCountryAbbr();
      this.CountryAbbr = res.data.data;
    },
    addFormItem() {
      this.formList.product.push({
        country_abb: "",
        product_title: "",
        product_describe: "",
        product_category: "",
      });
    },
    removeFormItem(index) {
      this.formList.product.splice(index, 1);
    },
    handleSkuSubmit() {
      this.$refs.formArr.validate((valid) => {
        if (valid) {
          let obj = [];
          let flag = true;
          let reg = /^[1-9]\d*$/;
          this.tableDataList.forEach((item) => {
            if (item.amount > 0 && reg.test(item.amount)) {
              obj.push({ skuID: item.product_sku_id, amount: item.amount });
            } else {
              flag = false;
            }
          });
          if (flag) {
            this.$emit("submit", {
              product_sku_item_id: this.formArr.product_sku_item_id,
              sellerProductItemId: this.formArr.sellerProductItemId,
              sku_item: obj,
            });
            this.closeForm();
          } else {
            return this.$message.error("数量不能少于一个且不能为非数字");
          }
        }
      });
    },
    SubmitSku() {
      this.$refs.formList.validate((valid) => {
        if (valid) {
          const form = Object.assign(this.formList, {
            sellerProductItemId: this.editData.sellerProductItemId,
          });
          this.$emit("submit", form);
          this.closeForm();
        }
      });
    },
    closeForm() {
      this.$emit("closeForm");
      this.isFullscreen = false;
      if (this.$refs["form"] !== undefined) {
        this.$refs["form"].resetFields();
      }
    },
    fScreen() {
      this.isFullscreen = true;
    },
    ifScreen() {
      this.isFullscreen = false;
    },
    //接口请求
    async getSkuList() {
      const res = await getSkuList();
      if (res.data.status === 200) {
        this.product_skus = res.data.data.product_skus;
      }
    },
    async getSkuFieldList() {
      const res = await getSkuFieldList();
      if (res.data.status === 200) {
        this.product_sku_items = res.data.data;
      }
    },
    async getSkuItemNo() {
      const res = await getSkuItemNo();
      if (res.data.status === 200) {
        this.sku_item_No = res.data.data.sku_item_No;
      }
    },
    async skuPreview(obj) {
      const res = await skuPreview(obj);
      if (res.data.status === 200) {
        let form = res.data.data;
        this.tableData.push({ ...form, isShow: false });
      }
    },
    async chooseSku(obj) {
      const res = await chooseSku(obj);
      if (res.data.status === 200) {
        this.tableDataList = res.data.data.map((item) => {
          return { ...item, isShow: false };
        });
      }
    },
    delClick(index, row) {
      console.log(index);
      this.tableData.splice(index, 1);
    },
  },
};
</script>
<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 11px;
}

::v-deep [data-v-b2cbea06] .el-form-item__content {
  line-height: 3px;
}

::v-deep .el-dialog__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
}

::v-deep .el-input__inner {
  height: 32px;
  line-height: 32px;
}

::v-deep .el-dialog__body {
  padding: 15px 10px;
}

::v-deep .el-dialog__footer {
  padding: 10px 16px;
  border-top: 1px solid #f0f0f0;
}

.el-select-dropdown
  .el-scrollbar
  .el-scrollbar__view
  .el-select-dropdown__item {
  height: auto;
  padding: 0 15px;
}

.hd-title {
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  margin-right: 26px;
}

.el-icon-full-screen {
  cursor: pointer;
}

.el-icon-news {
  cursor: pointer;
}

//表格样式
// 设置表格行高度
::v-deep .el-table__body tr,
::v-deep .el-table__body td {
  padding: 0;
  height: 50px;
}

// 表格内背景颜色
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
  font-weight: Normal;
}

// 去掉最下面的那一条线
.el-table::before {
  height: 0px;
}
</style>
